<script setup>
	import {
		ref,
		defineProps
	} from "vue"
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		bgcolor: {
			type: String,
			default: "#ffffff",
		},
		bgimage: {
			type: String,
			default: 'linear-gradient(to bottom, rgba(98, 101, 242,1), rgba(98, 101, 242, .1))'
		},
		color: {
			type: String,
			default: "#000000",
		},
		fontSize: {
			type: Number,
		},
		fontWeight: {
			type: [String, Number],
			default: "bold",
		},
		iconfont: {
			type: String,
			default: ''
		},
		parentMethod: {
			type: Function,
			default: () => {
				uni.navigateBack({
					delta: 1,
					fail:()=>{
						uni.redirectTo({
							url: '../home/index'
						})
					},
				});
			}
		}
	})
	// 获取不同机型胶囊按钮对应的属性值(宽高、胶囊距离顶部的距离)
	const menuButton = ref(uni.getMenuButtonBoundingClientRect())

	const callParentMethod = () => {
		if (typeof props.parentMethod === 'function') {
			props.parentMethod();
		}
	}
</script>

<template>
	<view class="navbar-wrapper" :style="{color:color,backgroundColor:bgcolor,backgroundImage:bgimage}">
		<view class="navbar-top" :style="{'height': menuButton.top+'px'}"></view>
		<view class="navbar" :style="{height: menuButton.height+'px'}">
			<view class="left-more">
				<text v-if="iconfont" class="iconfont" :class="[iconfont]"
					:style="{fontSize:(fontSize||menuButton.height)+'px',fontWeight: fontWeight}"
					@click="callParentMethod"></text>
				<image v-else :style="{height: menuButton.height+'px',width: menuButton.height*4+'px'}"
					src="../../static/images/logo.png"></image>
			</view>
			<view class="title">{{title}}</view>
		</view>
		<view class="expend-bg"></view>
	</view>
	<view :style="{height:(menuButton.top+menuButton.height)+'px'}">

	</view>
</template>

<style scoped lang="scss">
	.navbar-wrapper {
		position: fixed;
		width: 100%;
		top: 0;
	}

	.navbar {
		display: flex;
		align-items: center;
		justify-content: center;

		.left-more {
			position: absolute;
			left: 20rpx;
		}
	}

	.expend-bg {
		height: 150rpx;
	}
</style>